<% 
  var headContent = {
%>
<link rel="stylesheet" href="${base}/template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
<style type="text/css">
  /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form"  method="post" class="am-form" action="${base}/broadbandorder/update">
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg" onclick="window.history.back(); return false;">宽带订单处理</strong> / <small>宽带订单编辑</small></div>
  </div>
  <input type="hidden" name="bdorder.id" value="${bdorder.id!}" />
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1">宽带预约详情信息</a></li>      
    </ul>
    <div class="am-tabs-bd">
      <div class="am-active" id="tab1">
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              您的称呼：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <div class="am-btn-group" data-am-button>
                <button class="am-btn am-btn-default <%if(bdorder.gender! == 0){%>am-active<%}%>">
                  <input type="radio" name="bdorder.gender" value="0" <%if(bdorder.gender! == 0){%>checked<%}%>/> 先生
                </button>
                <button class="am-btn am-btn-default <%if(bdorder.gender! == 1){%>am-active<%}%>">
                  <input type="radio" name="bdorder.gender" value="1" <%if(bdorder.gender! == 1){%>checked<%}%>/> 女士
                </button>
              </div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>手机号码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input class="js-pattern-mobile" data-validation-message="手机号码格式不正确" type="text" id="telephone" name="bdorder.telephone" value="${bdorder.telephone!}" placeholder="请输入你的手机号码" maxlength="11" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger"></div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              客户姓名：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入客户姓名" name="bdorder.customer_name" value="${bdorder.customer_name!}" maxlength="50" />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              预约时间：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <div class="am-input-group date form_datetime">
                <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
                <input class="am-form-field" name="bdorder.create_date" size="16" type="text" value="${bdorder.create_date}" placeholder="预约时间" readonly />
              </div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              所在城市：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入所在城市" name="bdorder.city" value="${bdorder.city!}" maxlength="250"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              所在区县：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入所在城市" name="bdorder.area" value="${bdorder.area!}" maxlength="250" readonly />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              预约地址：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入预约地址" name="bdorder.address" value="${bdorder.address!}" maxlength="250"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              预约状态：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <div class="am-btn-group" data-am-button>
                <button class="am-btn am-btn-default <%if(bdorder.reservation_state! == 1){%>am-active<%}%>">
                  <input type="radio" name="bdorder.reservation_state" value="1" <%if(bdorder.reservation_state! == 1){%>checked<%}%> /> 等待审核
                </button>
                <button class="am-btn am-btn-default <%if(bdorder.reservation_state! == 2){%>am-active<%}%>">
                  <input type="radio" name="bdorder.reservation_state" value="2" <%if(bdorder.reservation_state! == 2){%>checked<%}%> /> 审核通过
                </button>
                <button class="am-btn am-btn-default <%if(bdorder.reservation_state! == 3){%>am-active<%}%>">
                  <input type="radio" name="bdorder.reservation_state" value="3" <%if(bdorder.reservation_state! == 3){%>checked<%}%> /> 审核不通过
                </button>
                <button class="am-btn am-btn-default <%if(bdorder.reservation_state! == 4){%>am-active<%}%>">
                  <input type="radio" name="bdorder.reservation_state" value="4" <%if(bdorder.reservation_state! == 4){%>checked<%}%> /> 结单
                </button>
              </div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              宽带预约详情：
            </div>
            <div class="am-u-sm-8 am-u-md-10">
            <!--边框样式：border: 1px solid #ccc;-->
              <div <%if(bdorder.introduction! != null && bdorder.introduction! != ''){%>class="am-scrollable-vertical am-list-border" style="width:58%;color:gray;"<%}%>>
                <div>${bdorder.introduction!}</div>
                <div>￥${bdorder.price!}元/${bdorder.period!}</div>
              </div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              订单号：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入订单号" name="bdorder.order_no" value="${bdorder.order_no!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              销售人员姓名：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入订单号" name="bdorder.saler_name" value="${bdorder.saler_name!}" maxlength="50" readonly />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              销售人员电话：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" placeholder="请输入订单号" name="bdorder.saler_mobile" value="${bdorder.saler_mobile!}" maxlength="50" readonly/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              资管Id：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <div style="width:58%;color:gray;">${bdorder.manager_id!}</div>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
      </div>
      </div>
  </div>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="submit" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">返回上一级</button>
  </div>
</form>
<script type="text/javascript" src="${base}/template/common/js/datetimepicker/amazeui.datetimepicker.js"></script>
  <script type="text/javascript" src="${base}/template/common/js/datetimepicker/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
  $(function(){
    /*表单验证：begin*/
    //自定义规则
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.mobile = /^1((3|5|8){1}\d{1}|70)\d{8}$/;
    }
    $("#form").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      }
    });
    /*表单验证：end*/
    /*日历控件 begin*/
    var mydatetime = $('.form_datetime').datetimepicker({
      language:  'zh-CN',//语言设置，默认使用英语 'en' ,额外添加amazeui.datetimepicker.zh-CN.js,注意编码格式charset="UTF-8"
      format: 'yyyy-mm-dd hh:ii:ss',//日期格式：接受String,默认为mm/dd/yyyy
      autoclose: true,//日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days(今日) 视图有效)。
      todayBtn: true,//是否显示今日视图
      todayHighlight: true,//是否高亮显示今天的日期
      minuteStep: 5,//设置分钟视图时间间隔数，默认为 5
      pickerPosition: 'bottom-right'//'bottom-right' (默认)、'bottom-left'、'top-right'、'top-left'
    });
    mydatetime.on('show', function(ev){//绑定事件
      //alert('datetimepciker 显示了');
    });
    /*日历控件 end*/
  });
</script>
<%}%>